<template>
	<view class="echarts_">
		<!-- <canvas id="main"></canvas> -->
		<!-- <div>{{code}}</div> -->
		<div id="main" ref="main"></div>
		<!-- <div class="main"></div> -->
	</view>
</template>

<script>
import { sendImgData } from '../../api/api.js';
// import * as echarts from '../../static/echarts.min.js';
import * as echarts from 'echarts';

let myChart;

export default {
	name: 'echarts_',
	data() {
		return {
			imgData: null,
			myChart: null
		};
	},
	props: ['code'],
	async beforeMount() {
		let data = await sendImgData(this.code);
		this.imgData = data.data;
		console.log(this.code, this.imgData);

		// this.myChart = echarts.init(document.getElementsByClassName('main')[0]);

		// myChart = echarts.init(document.getElementById('main'));
		myChart = echarts.init(this.$refs.main);
		// this.$nextTick(() => {
		myChart.setOption(this.imgData);
		// });
	},
	beforeDestroy() {
		// // 页面关闭时销毁echarts实例
		myChart.clear();
		myChart.dispose();
	}
};
</script>

<style lang="less">
.echarts_ {
	width: 110%;
	height: 110%;
	.main {
		width: 100%;
		height: 100%;
	}
	#main {
		width: 100%;
		height: 100%;
	}
}
</style>
